<!--
  Path Animation Demo Component

  This demo shows how to animate entities along paths with trail visualization
  
  Category: Basic

  Component Documentation:
  ========================

  Title: Path Animation Demo
  Description: This demo shows how to animate entities along paths with trail visualization
  Features:
    - TODO: List key features of this demo
  Author: CesiumJS Demo Project
  Date: 8/21/2025
-->

<template>
  <BaseCesiumViewer 
    ref="cesiumViewer" 
     
    @viewer-ready="onViewerReady"
  />
</template>

<script>
import { ref } from 'vue';
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';
import { createPathAnimation, setViewRectangle } from '../utils/cesiumUtils.js';

export default {
  name: 'PathAnimationDemo',
  components: {
    BaseCesiumViewer
  },
  setup() {
    const cesiumViewer = ref(null);

    // This function is called when the Cesium viewer is ready
    const onViewerReady = (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      const { viewer, Cesium } = payload;
      
      // 创建一个移动的点沿着预定义路径
      const movingEntity = createPathAnimation(viewer, {
        name: 'Moving Point',
        positions: [
          [-75.1652, 39.9526],
          [-74.0059, 40.7128]
        ],
        duration: 30,
        color: Cesium.Color.RED
      });
      
      // 获取起点和终点位置
      const positionProperty = movingEntity.position;
      const startTime = viewer.clock.startTime;
      const stopTime = viewer.clock.stopTime;
      
      const startPosition = positionProperty.getValue(startTime);
      const endPosition = positionProperty.getValue(stopTime);
      
      // 添加起点和终点标记
      viewer.entities.add({
        name: 'Start Point',
        position: startPosition,
        point: {
          pixelSize: 8,
          color: Cesium.Color.GREEN,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2
        },
        label: {
          text: 'Start',
          font: '14px sans-serif',
          fillColor: Cesium.Color.WHITE,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(0, -15)
        }
      });
      
      viewer.entities.add({
        name: 'End Point',
        position: endPosition,
        point: {
          pixelSize: 8,
          color: Cesium.Color.BLUE,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2
        },
        label: {
          text: 'End',
          font: '14px sans-serif',
          fillColor: Cesium.Color.WHITE,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(0, -15)
        }
      });

      // 设置时钟
      const start = startTime;
      const end = stopTime;
      viewer.clock.startTime = start.clone();
      viewer.clock.stopTime = end.clone();
      viewer.clock.currentTime = start.clone();
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
      viewer.clock.multiplier = 5;
      viewer.clock.shouldAnimate = true; // 启动时钟动画

      // 将视图定位到路径位置
      setViewRectangle(viewer, {
        west: -76.0,
        south: 39.0,
        east: -73.0,
        north: 41.0
      });
    };

    return {
      cesiumViewer,
      onViewerReady
    };
  }
};
</script>

<style scoped>
/* 组件样式 */
</style>